<template>
	<view class="container">
		<view class="list">
			<view class="item u-flex u-col-center u-row-between">
				<view class="l">
					退款原因<text>*</text>
				</view>
				<view class="r u-flex u-col-center u-row-right" @click="open">
					<text v-if="cindex>-1">{{list[cindex].title}}</text>
					<text v-else>请选择</text>
					<image src="@/static/image/u02.png" mode="aspectFill"></image>
				</view>
			</view>
			<view class="item u-flex u-col-center u-row-between">
				<view class="l">
					订单合计<text>*</text>
				</view>
				<view class="r2 u-flex u-col-center u-row-right">
					￥<text>{{data.price}}</text>
				</view>
			</view>
			<view class="item2">
				<view class="title">
					退款说明
				</view>
				<view class="con">
					<view class="textarea">
						<textarea v-model="textarea" :maxlength="200" placeholder="补充描述，有助于商家更好的处理售后问题"></textarea>
						<text>{{textarea.length}}/{{total}}</text>
					</view>

					<view class="imgs">
						<view class="i" v-for="(item,index) in images" :key="index">
							<image :src="http + item" mode="aspectFill"></image>
							<view class="del" @click="images.splice(index,1)">
								<image src="../../static/image/del.png" mode="aspectFill"></image>
							</view>
						</view>
						<view class="i2" @click="upload">
							<image src="../../static/image/up3.png" mode="aspectFill"></image>
							<text>上传凭证</text>
						</view>
					</view>
				</view>

			</view>
		</view>
		<view class="btn" @click="refundOrder">
			提交申请
		</view>
		<u-popup :show="show" mode="bottom" @close="close" @open="open" :round="20">
			<view class="pop">
				<view class="pop-title">
					选择退款原因
				</view>
				<view class="pop-list">
					<view class="item u-flex u-col-center u-row-between" v-for="(item,index) in list" :key="index"
						@click="change(item.id,index)">
						<view class="l">
							{{item.title}}
						</view>
						<view class="r">
							<image src="@/static/image/c2.png" mode="aspectFill" v-if="cid == item.id"></image>
							<image src="@/static/image/c1.png" mode="aspectFill" v-else></image>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				total: 200,

				http: this.$imgUrl,
				textarea: '',
				show: false,
				cid: '',
				cindex: -1,
				list: [{
						id: 1,
						name: '不想要了'
					},
					{
						id: 2,
						name: '信息填写错误，想重新拍'
					},
					{
						id: 3,
						name: '不想吃了'
					},
					{
						id: 4,
						name: '多拍/拍错/重新拍'
					},
					{
						id: 5,
						name: '其他'
					},
				],
				id: "",
				data: {},
				images: [],

			}
		},
		onLoad(o) {
			this.uid = uni.getStorageSync('uid')
			this.longitude = uni.getStorageSync("lng")
			this.latitude = uni.getStorageSync("lat")
			this.id = o.id
			this.reasonList()
		},
		onShow() {
			this.getData()
		},
		methods: {
			reasonList() {
				this.$http.post('/app/communals/reasonList', {

				}).then(res => {
					console.log(res)
					this.list = res.data.list
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			},
			upload() {
				this.$http.uploads().then(res => {
					console.log(res)
					this.images = [...this.images, ...res]
				})
			},
			refundOrder() {
				if (this.cindex == -1) {
					uni.showToast({
						title: '选择退款原因',
						icon: "none"
					});
					return
				}
				// if (!this.textarea) {
				// 	uni.showToast({
				// 		title: '请填写退款说明',
				// 		icon: "none"
				// 	});
				// 	return
				// }

				this.$http.post('/app/orders/refundOrder', {
					mid: this.uid,
					order_list_id: this.id,
					refund_reason: this.list[this.cindex].title,
					refund_remark: this.textarea,
					refund_image: this.images.toString()
				}).then(res => {
					console.log(res)
					if (res.code == 0) {

						uni.showToast({
							title: '申请成功',
							icon: "none"
						});
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 1500)
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none"
						});
					}
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			},
			getData() {
				// status状态 0已取消 1待支付 2待备餐 3备餐中 4已送达 5已完成

				this.$http.post('/app/orders/orderDetail', {
					mid: this.uid,
					order_list_id: this.id,
					longitude: this.longitude,
					latitude: this.latitude

				}).then(res => {
					console.log(res)
					if (res.code == 0) {
						this.data = res.data

					} else {
						uni.showToast({
							title: res.msg,
							icon: "none"
						});
					}
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			},
			change(id, index) {
				this.cid = id
				this.cindex = index
				this.show = false
			},
			open() {
				this.show = true
			},
			close() {
				this.show = false
				// console.log('close');
			},
		}
	}
</script>

<style lang="less" scoped>
	@color: #FF0000;

	.container {
		padding: 20rpx;

		.pop {
			padding: 20rpx;

			.pop-title {
				font-size: 36rpx;
				font-weight: 600;
				height: 60rpx;
				line-height: 60rpx;
			}

			.pop-list {
				margin-top: 20rpx;

				.item {
					padding: 25rpx 0;

					.l {

						height: 40rpx;
						line-height: 40rpx;

						font-size: 28rpx;
						color: #000000;
						text-align: left;

					}

					.r {
						width: 40rpx;
						height: 40rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}
				}
			}
		}

		.btn {
			position: fixed;
			left: 40rpx;
			right: 40rpx;
			bottom: 40rpx;
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 40rpx;
			font-size: 28rpx;
			color: #fff;
			background-color: #000;
			z-index: 999;
			text-align: center;
		}

		.list {
			padding: 20rpx;
			border-radius: 20rpx;
			background-color: #fff;

			.item {
				border-bottom: 2rpx solid #eee;
				padding: 35rpx 0;


				.l {
					height: 40rpx;
					line-height: 40rpx;
					font-size: 28rpx;
					color: #000;
					width: 150rpx;

					text {
						color: @color;
					}
				}

				.r {
					flex: 1;
					width: 1rpx;

					text {
						font-size: 28rpx;
						color: #B5B5BB;
					}

					image {
						width: 40rpx;
						height: 40rpx;
					}
				}

				.r2 {
					font-size: 28rpx;
					color: @color;

					text {
						font-size: 32rpx;
						font-weight: 600;
					}
				}

			}

			.item2 {
				margin-top: 20rpx;

				.title {
					height: 40rpx;
					line-height: 40rpx;
					font-size: 28rpx;
					color: #000;
				}

				.con {
					margin-top: 20rpx;
					padding: 20rpx;
					border-radius: 10rpx;
					background-color: #F8F8F8;

					.textarea {
						height: 320rpx;
						width: 100%;
						position: relative;

						textarea {
							width: 100%;
							height: 100%;
							font-size: 28rpx;
							color: #333;
						}

						text {
							height: 36rpx;

							font-size: 26rpx;
							color: #BEBEBE;
							text-align: right;
							position: absolute;
							bottom: -40rpx;
							right: 0;
						}
					}


					.imgs {
						margin-top: 20rpx;
						display: grid;
						grid-template-columns: repeat(4, 1fr);
						gap: 10rpx;

						.i {
							width: 150rpx;
							height: 150rpx;
							border-radius: 12rpx;

							box-sizing: border-box;
							position: relative;

							image {
								width: 100%;
								height: 100%;
								border-radius: 6rpx;
								overflow: hidden;

							}

							.del {
								width: 40rpx;
								height: 40rpx;
								position: absolute;
								top: 0;
								right: 0;

								image {
									width: 100%;
									height: 100%;
								}
							}
						}

						.i2 {
							display: flex;
							align-items: center;
							justify-content: center;
							text-align: center;
							flex-direction: column;
							width: 150rpx;
							height: 150rpx;
							border-radius: 12rpx;
							border: 2rpx solid #D1D1D6;
							box-sizing: border-box;

							image {
								width: 60rpx;
								height: 60rpx;

							}

							text {
								margin-top: 10rpx;
								height: 40rpx;

								font-size: 28rpx;
								color: #D1D1D6;
								text-align: center;

							}
						}
					}
				}
			}
		}
	}
</style>